<template>
	<view class="list-page" :style="!loading ? 'opacity: 0;' : 'opacity: 1;'">
		<!--  v-model="dataList" @query="queryList" -->
		<!--  refresher-only @onRefresh="onRefresh" -->
		<pageTxt>
			<view class="page-top-box">
				<listTabCom :tabList="tabList" @topTabClick="topTabClick" :current="topTabIndex"></listTabCom>
				<view class="search-box flex ac">
					<u-search borderColor="#DADADA" bgColor="#ffffff" placeholder="搜索项目名称" v-model="searchData.keyword" :showAction="false"></u-search>
					<u-button
						customStyle="width: 156rpx;height: 64rpx;background: #F8F8FA;border-radius: 32rpx;border-color:#F8F8FA;font-weight: 400;font-size: 26rpx;color: #919092;margin-left:20rpx;"
						:hairline="false"
						text="新增项目"
					></u-button>
				</view>
				<view class="search-tab-box flex ac">
					<view class="tab-width">
						<u-tabs
							:list="tabList"
							lineHeight="0"
							inactiveStyle="width: 118rpx;height: 52rpx;background: #F8F8FA;border-radius: 26rpx;font-weight: 400;font-size: 26rpx;color: #919092;line-height:52rpx;text-align:center;"
							activeStyle="width: 118rpx;height: 52rpx;background: #3B75FF;border-radius: 26rpx;font-weight: 500;font-size: 26rpx;color: #FFFFFF;line-height:52rpx;text-align:center;"
						></u-tabs>
					</view>
					<view class="search-btn flex ac" @click="searchShow = true" :style="searchShow ? 'color:#3B75FF;' : ''">
						筛选
						<text class="iconfont icon-shaixuan" :style="searchShow ? 'color:#3B75FF;' : ''"></text>
					</view>
				</view>
			</view>
			<view class="list-content-box ios" :style="{ height: 'calc(100vh - ' + topHeight + 'px);' }" v-if="loading">
				<z-paging ref="paging" :fixed="false" refresher-only @onRefresh="onRefresh" :paging-style="{ 'background-color': '#f7f7f7', height: '100%', width: '100%' }">
					<template v-for="(item, index) in 5">
						<view class="list-items flex ac flex-wrap" :key="index" v-if="topTabIndex == 0">
							<view class="list-items-title flex ac jb">
								<view class="title u-line-1">Cuida东方巴黎广场新店装修东方巴黎广场新店装修东方巴黎广场新店装修</view>
								<u-button
									text="已完成"
									v-if="index == 0"
									:hairline="false"
									customStyle="width: 104rpx;height: 44rpx;background: rgba(59, 117, 255, .15);border-radius: 4rpx;font-weight: 400;font-size: 24rpx;color: #3B75FF;border-color:rgba(59, 117, 255, .15)"
								></u-button>
								<u-button
									text="已驳回"
									v-if="index == 1"
									:hairline="false"
									customStyle="width: 104rpx;height: 44rpx;background: rgba(254, 84, 84, .15);border-radius: 4rpx;font-weight: 400;font-size: 24rpx;color: #FE5454;border-color:rgba(254, 84, 84, .15);"
								></u-button>
								<u-button
									text="审批中"
									v-if="index == 2"
									:hairline="false"
									customStyle="width: 104rpx;height: 44rpx;background: rgba(255, 156, 14, .15);border-radius: 4rpx;font-weight: 400;font-size: 24rpx;color: #FF9C0E;border-color:rgba(255, 156, 14, .15);"
								></u-button>
								<u-button
									text="已失效"
									v-if="index == 3"
									:hairline="false"
									customStyle="width: 104rpx;height: 44rpx;background: rgba(244, 244, 245, .8);border-radius: 4rpx;font-weight: 400;font-size: 24rpx;color: #909399;border-color:rgba(244, 244, 245, .15);"
								></u-button>
							</view>
							<view class="list-items-item list-items-item-width50 flex ac">
								<view class="title">项目编号</view>
								<view class="desc u-line-1">CD00005CD00005CD00005CD00005</view>
							</view>
							<view class="list-items-item list-items-item-width50 flex ac">
								<view class="title">项目编号</view>
								<view class="desc u-line-1">CD00005</view>
							</view>
							<view class="list-items-item flex ac">
								<view class="title">项目编号</view>
								<view class="desc u-line-1">CD00005</view>
							</view>
							<view class="list-items-item flex ac">
								<view class="title">项目编号</view>
								<view class="desc u-line-1">CD00005CD00005CD00005CD00005CD00005CD00005CD00005</view>
							</view>
							<!-- 按钮 -->
							<view class="list-items-item-btn-box flex ac je">
								<u-button
									text="我是按钮"
									customStyle="width: 184rpx;height: 58rpx;background: #FFFFFF;border-radius: 12rpx;border: 2rpx solid #3B75FF;font-weight: 400;font-size: 24rpx;color: #3B75FF;"
								></u-button>
							</view>
						</view>
					</template>
				</z-paging>
			</view>
		</pageTxt>
		<!-- 筛选弹窗 -->
		<u-popup :show="searchShow" round="30" @close="searchShow = false" closeable>
			<view class="search-popup-title">全部筛选</view>
			<scroll-view scroll-y class="search-popup-box">
				<view class="search-items">
					<view class="search-items-title">项目编号</view>
					<u--input placeholder="请输入内容" border="surround"></u--input>
				</view>
				<view class="search-items">
					<view class="search-items-title flex ac jb">
						<text>项目品牌</text>
						<view class="search-items-title-right flex ac jc" hover-class="hover-class">
							<text class="txt">收起</text>
							<u-icon name="arrow-up" color="#A1A7B3" size="12"></u-icon>
						</view>
					</view>
					<view class="search-items-list flex ac flex-wrap">
						<view class="search-items-list-item" hover-class="hover-class" v-for="(item, index) in 5" :key="index">KOI</view>
						<view class="search-items-list-more flex ac jc" hover-class="hover-class">
							<text class="txt">查看更多</text>
							<u-icon name="arrow-down" color="#A1A7B3" size="12"></u-icon>
						</view>
					</view>
				</view>
				<view class="search-items">
					<view class="search-items-title flex ac jb">
						<text>项目名称</text>
						<view class="search-items-title-right flex ac jc" hover-class="hover-class">
							<text class="txt">收起</text>
							<u-icon name="arrow-up" color="#A1A7B3" size="12"></u-icon>
						</view>
					</view>
					<view class="search-items-list flex ac flex-wrap">
						<view
							class="search-items-list-item"
							:class="index == 0 ? 'search-items-list-item-active' : ''"
							hover-class="hover-class"
							v-for="(item, index) in 5"
							:key="index"
						>
							KOI
						</view>
						<view class="search-items-list-more flex ac jc" hover-class="hover-class">
							<text class="txt">查看更多</text>
							<u-icon name="arrow-down" color="#A1A7B3" size="12"></u-icon>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="btn-box flex ac jb">
				<u-button
					text="重置"
					customStyle="width: 248rpx;height: 82rpx;background: #242834;border-radius: 12rpx;font-weight: 500;font-size: 30rpx;color: #FFFFFF;"
				></u-button>
				<u-button
					text="查询"
					customStyle="width: 422rpx;height: 82rpx;background: #3B75FF;border-radius: 12rpx;font-weight: 500;font-size: 30rpx;color: #FFFFFF;"
				></u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchShow: false,
			loading: false,
			dataList: [],
			searchData: {
				keyword: ''
			},
			topHeight: 0,
			topTabIndex: 0,
			tabList: [
				{
					name: '关注'
				},
				{
					name: '推荐'
				},
				{
					name: '电影'
				},
				{
					name: '科技'
				},
				{
					name: '音乐'
				},
				{
					name: '美食'
				},
				{
					name: '文化'
				},
				{
					name: '财经'
				},
				{
					name: '手工'
				}
			]
		};
	},
	onLoad() {
		this.getHeight();
	},
	methods: {
		getHeight() {
			// 创建节点查询
			let that = this;
			const systemInfo = uni.getSystemInfoSync();
			const query = uni.createSelectorQuery().in(that);
			query.select('.page-top-box').boundingClientRect();
			query.exec((res) => {
				console.log(systemInfo, '上边距:', res, systemInfo.statusBarHeight); // 距离视口顶部距离
				that.topHeight = res[0].height + systemInfo.statusBarHeight + 20; // + 20 + res[1].height
				setTimeout(() => {
					that.loading = true;
				}, 0);
			});
		},
		onRefresh() {
			this.$refs.paging.complete();
		},
		topTabClick(index) {
			this.topTabIndex = index;
		}
	}
};
</script>

<style lang="scss" scoped></style>
